<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            function Vector2d (){
                this.x = 0;
                this.y = 0;
            }

            function Triangle() {
                this.p1 = new Vector2d();
                this.p2 = new Vector2d();
                this.p3 = new Vector2d();
            }


            function vectorCheng(vector, m) {
                var newV = new Vector2d();
                newV.x = vector.x * m.getValue(0, 0) + vector.y * m.getValue(1, 0);
                newV.y = vector.x * m.getValue(0, 1) + vector.y * m.getValue(1, 1);
                return newV;
            }

            function render(ctx, trangles) {
                // 画列表里的三角形
                for (var i = 0; i < trangles.length; i++){
                    ctx.moveTo(trangles[i].p1.x, trangles[i].p1.y);
                    ctx.lineTo(trangles[i].p2.x, trangles[i].p2.y);

                    ctx.moveTo(trangles[i].p2.x, trangles[i].p2.y);
                    ctx.lineTo(trangles[i].p3.x, trangles[i].p3.y);

                    ctx.moveTo(trangles[i].p3.x, trangles[i].p3.y);
                    ctx.lineTo(trangles[i].p1.x, trangles[i].p1.y);
                    ctx.stroke();
                }

            }

            // 2维矩阵
            function M2d(v1, v2, v3, v4) {
                this.setValue = function(row, column, value) {
                    this.data[row * 2 + column] = value;
                };

                this.getValue = function(row, column) {
                    return this.data[row * 2 + column];
                }

                this.data = [v1, v2, v3, v4];
            }

            window.onload = function() {
                /** @type {HTMLCanvasElement} */
                var canvas = document.getElementById("canvas");

                var ctx = canvas.getContext("2d");

                //ctx.fillStyle="#FF0000";
                //ctx.fillRect(0,0,150,75);


                var m2 = new M2d(0.707, 0.707, -0.707, 0.707);

                var tri = new Triangle();

                tri.p1.x = 0;
                tri.p1.y = 0;
                tri.p2.x = 50;
                tri.p2.y = 0;
                tri.p3.x = 48;
                tri.p3.y = 8;

                tri.p1 = vectorCheng(tri.p1, m2);
                tri.p2 = vectorCheng(tri.p2, m2);
                tri.p3 = vectorCheng(tri.p3, m2);

                var tris = [];
                tris.push(tri);

                render(ctx, tris);

            }
        </script>
    </head>
    <body>
        <canvas id="canvas" style="background-color:#FFA500;width:500px; height:500px">
        </canvas>
    </body>

</html>

